<template>
  <div class="home">
    <div class="common-layout">
      <el-container>
        <el-header class="header">
          <p class="rt" @click="store.dispatch('exitAction')">退出</p>
          <p class="rt" v-if="userInfo.M_LoginID" style="margin-right: 10px">
            {{ userInfo.M_LoginID }} | {{ userInfo.M_Scores }}
          </p>
          <img src="../assets/images/logo.png" alt="" />
          <span>物联网智慧仓储管理系统</span>
        </el-header>

        <el-container class="container">
          <el-aside width="200px" class="aside">
            <el-row class="tac">
              <el-col :span="12">
                <el-menu
                  default-active="2"
                  class="el-menu-vertical-demo"
                  @open="handleOpen"
                  @close="handleClose"
                  router
                  unique-opened="true"
                >
                  <el-sub-menu index="1">
                    <template #title>
                      <span>系统管理</span>
                    </template>
                    <el-menu-item index="/user">用户管理</el-menu-item>
                    <el-menu-item index="/group">组管理</el-menu-item>
                    <el-menu-item index="jurisdiction">权限管理</el-menu-item>
                    <el-menu-item index="customer">客户管理</el-menu-item>
                    <el-menu-item index="parameter">参数管理</el-menu-item>
                    <el-menu-item index="data">数据维护管理</el-menu-item>
                  </el-sub-menu>
                  <el-sub-menu index="2">
                    <template #title>
                      <span>入库管理</span>
                    </template>
                    <el-menu-item index="/ware-handing">入库办理</el-menu-item>
                    <el-menu-item index="ins">验货装盘</el-menu-item>
                    <el-menu-item index="1-2-3">入库结算</el-menu-item>
                    <el-menu-item index="1-2-4">货物入库</el-menu-item>
                    <el-menu-item index="recquary">入库单查询</el-menu-item>
                    <el-menu-item index="inspec">入库明细查询</el-menu-item>
                  </el-sub-menu>
                  <el-sub-menu index="3">
                    <template #title>
                      <span>出库管理</span>
                    </template>
                    <el-menu-item index="/outstockg">出库办理</el-menu-item>
                    <el-menu-item index="/outtrue">出库确认</el-menu-item>
                    <el-menu-item index="/outtrue2">出库单查询</el-menu-item>
                    <el-menu-item index="/outtrue3">出库明细查询</el-menu-item>
                  </el-sub-menu>
                  <el-sub-menu index="4">
                    <template #title>
                      <span>过户管理</span>
                    </template>
                    <el-menu-item index="/management">过户办理</el-menu-item>
                    <el-menu-item index="transact">过户单管理</el-menu-item>
                  </el-sub-menu>
                  <el-sub-menu index="5">
                    <template #title>
                      <span>调仓管理</span>
                    </template>
                    <el-menu-item index="deploy">货物移盘</el-menu-item>
                    <el-menu-item index="syym">托盘调仓</el-menu-item>
                  </el-sub-menu>
                  <el-sub-menu index="6">
                    <template #title>
                      <span>盘点管理</span>
                    </template>
                    <el-menu-item index="guan">库存盘点</el-menu-item>
                    <el-menu-item index="search">盘点查询</el-menu-item>
                  </el-sub-menu>
                  <el-sub-menu index="7">
                    <template #title>
                      <span>业务查询</span>
                    </template>
                    <el-menu-item index="/lnventory">库存查询</el-menu-item>
                    <el-menu-item index="/utilization">仓库使用率查询</el-menu-item>
                    <el-menu-item index="/details">仓库使用明细查询</el-menu-item>
                  </el-sub-menu>
                  <el-sub-menu index="8">
                    <template #title>
                      <span>资产管理</span>
                    </template>
                    <el-menu-item index="/warehouse">仓库管理</el-menu-item>
                    <el-menu-item index="/position">仓位管理</el-menu-item>
                    <el-menu-item index="/tray">托盘管理</el-menu-item>
                  </el-sub-menu>
                </el-menu>
              </el-col>
            </el-row>
          </el-aside>

          <el-main class="main">
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { computed } from "vue";
const store = useStore();
const userInfo = computed(() => store.state.user.userInfo);
console.log("1", store.state.user);
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
</script>

<style>
.aside .el-col-12 {
  max-width: 100%;
  width: 100%;
  flex: 1 1 100%;
}
.aside li {
  background-color: #d5d8db;
}
.aside .el-sub-menu {
  background-color: #d9dcde;
}
.aside .is-active {
  color: #3f6d9c;
  background-color: #b5bcc3;
}
.aside .is-opened {
  background-color: #2e6095;
}
.home .el-message,
.el-message--info {
  width: 150px;
  margin: 0 auto;
  padding: 10px;
  border-radius: 10px;
  position: absolute;
  left: 50%;
  right: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #343434;
  background-color: #ddd;
}
</style>

<style scoped>
.rt {
  float: right;
}
.header {
  height: 70px;
  line-height: 70px;
  color: #7392b3;
  background-color: #2d3e50;
  font-size: 30px;
}
.header img {
  width: 43px;
  margin-right: 10px;
}
.header p {
  font-size: 16px;
}
.home {
  height: 100vh;
  position: relative;
}
/* .container {
  height: 100vh;
} */
.aside {
  background-color: #eaeaea;
}
</style>
